<template>
  <div class="page-home">
    <van-nav-bar :title="title" @click-left="$router.push('/city')">
      <template slot="left">
        <div class="van-nav-bar__text" v-if="city">
          <span>{{ city.name }}</span>
          <i class="iconfont icon-xiajiantou"></i>
        </div>
      </template>
    </van-nav-bar>

    <div class="page-home__view" ref="homeView">
      <router-view></router-view>
    </div>

    <van-tabbar route>
      <van-tabbar-item icon="home-o" to="/films">电影</van-tabbar-item>
      <van-tabbar-item icon="photo-o" to="/cinemas">影院</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/center">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Home',

  provide () {
    return {
      'home': this
    }
  },

  computed: {
    ...mapState(['title', 'city'])
  }
}
</script>

<style lang="scss">
@import '../assets/styles/mixins.scss';

.page-home {
  display: flex;
  flex-direction: column;
  height: 100%;
  &__view {
    flex: 1;
    overflow-y: auto;
  }
  .van-tabbar {
    position: relative;
  }
}
</style>
